<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/2.png"></image>
		<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/3.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view> 
		<view class="t-b2">欢迎使用</view>
		<form class="cl">
			<view class="t-a">
				<image class="image" src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
				<view class="line"></view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="t-a">
				<image class="image" src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
				<view class="line"></view> 
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="t-a captcha-container" v-if="captchaEnabled">
			 <image class="image" src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
			 <view class="line"></view> 
			 <input v-model="loginForm.code" type="number" class="captcha-input" inputmode="numeric" pattern="[0-9]*" placeholder="请输入验证码" maxlength="4" />
			  <view class="captcha-image-wrapper">
			    <image class="captcha-image":src="codeUrl"alt="验证码图片" @click="getCode"  />
			  </view>
			</view>
			<button @tap="handleLogin()">登 录</button>
		</form>
		<view class="t-f"><text>————— 第三方账号登录 —————</text></view>
		<view class="t-e cl">
			<view class="t-g" @tap="wxLogin()"><image src="https://zhoukaiwen.com/img/loginImg/wx.png"></image></view>
			<view class="t-g" @tap="zfbLogin()"><image src="https://zhoukaiwen.com/img/loginImg/qq.png"></image></view>
		</view>
	</view>
</template>
<script>
import { getCodeImg } from '@/api/login'
export default {
	data() {
		return {
			codeUrl: "",
			captchaEnabled: true,
			globalConfig: getApp().globalData.config,
			loginForm: {
			  username: "admin",
			  password: "admin123",
			  code: "",
			  uuid: ''
			},
			title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
		};
	},
	onLoad() {},
	created() {
	  this.getCode()
	},
	methods: {
		// 登录方法
		handleLogin() {
		  if (this.loginForm.username === "") {
		    this.$modal.msgError("请输入您的账号")
		  } else if (this.loginForm.password === "") {
		    this.$modal.msgError("请输入您的密码")
		  } else if (this.loginForm.code === "" && this.captchaEnabled) {
		    this.$modal.msgError("请输入验证码")
		  } else {
		    this.$modal.loading("登录中，请耐心等待...")
		    this.pwdLogin()
		  }
		},
		// 密码登录
		pwdLogin() {
		  this.$store.dispatch('Login', this.loginForm).then(() => {
		    this.$modal.closeLoading()
		    this.loginSuccess()
		  }).catch(() => {
		    if (this.captchaEnabled) {
		      this.getCode()
		    }
		  })
		},
		// 获取图形验证码
		getCode() {
		  getCodeImg().then(res => {
			this.loginForm.code = ""
		    this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
		    if (this.captchaEnabled) {
		      this.codeUrl = 'data:image/gif;base64,' + res.img
		      this.loginForm.uuid = res.uuid
		    }
		  })
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
		  // 设置用户信息
		  this.$store.dispatch('GetInfo').then(res => {
		    this.$tab.reLaunch('/pages/index')
		  })
		},
		//等三方微信登录
		wxLogin() {
			uni.showToast({ title: '微信登录', icon: 'none' });
		},
		//第三方支付宝登录
		zfbLogin() {
			uni.showToast({ title: '支付宝登录', icon: 'none' });
		}
	}
};
</script>
<style>
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login .input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a .image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}
.t-login .t-a .images {
	width: 200rpx;
	height: 60rpx;  
	left: 40rpx; 
}
.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 24rpx;
	color: #aaaaaa;
	padding: 0rpx 0 24rpx 0rpx;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 80rpx auto 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 100rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
.captcha-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 50rpx;
}

.captcha-input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.captcha-image-wrapper {
  position: relative;
  width: 100px;
  height: 44px;
  border: 1px solid #eee;
  border-radius: 40px;
}

.captcha-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.captcha-loading {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  font-size: 12px;
}
</style>
